<template>
  <section class="app-main">
    <div class="sidebar">
      <div
        class="sidebar-item"
        :class="{ active: activeName === 'taskCenter' }"
        @click="handleSidebarClick('taskCenter')"
        >任务中心</div
      >
      <div
        class="sidebar-item"
        :class="{ active: activeName === 'analogDiagnosis' }"
        @click="handleSidebarClick('analogDiagnosis')"
        >模拟诊断</div
      >
    </div>
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" class="flex-item" />
    </transition>
  </section>
</template>

<script>
  export default {
    name: 'AppMain',
    computed: {
      key() {
        return this.$route.path
      },
      activeName() {
        return this.$route.name
      }
    },
    methods: {
      handleSidebarClick(name) {
        this.$router.push(name)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-main {
    height: calc(100vh - 10px);
    width: 100%;
    position: relative;
    overflow: auto;
    padding: 10px;
    display: flex;
  }
  .flex-item {
    flex: 1;
  }
  .sidebar {
    width: 200px;
    font-size: 18px;
    border-right: 4px solid #ebeef5;
    height: 300px;
    &-item {
      margin: 10px 0;
      color: #606266;
      cursor: pointer;
      padding: 20px 10px;
      border-start-start-radius: 6px;
      border-end-start-radius: 6px;
      position: relative;
      right: -4px;
      &.active {
        border-right: 4px solid #409eff;
        color: #409eff;
        z-index: 5;
      }
    }
  }
</style>
